<template>
    <div>
        <div>
            <div>
				<el-button type="primary" @click="callPayPut(0)" size="mini">保存</el-button>
                <el-button  @click="callPayPut(1)" size="mini">{{ttype==1?'付款':'收款'}}结算</el-button>
            </div>
        </div>
        <br>
        <div class="searchForm">
            <div>
                日期： 
				<el-date-picker
				      v-model="time"
					  size="mini"
					  value-format="yyyy-MM-dd"
				      type="daterange"
				      range-separator="至"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期">
				</el-date-picker>	
            </div>
            <div>
                经手人： 
				<el-input size="mini" v-model="search_form.buyer_person" 
				placeholder="请输入经手人"  
				style="width:150px;"></el-input>
            </div>
            <div >
				<div style="display: flex;" v-if="ttype==1">
					<div>
						供应商：
					</div>
					<div>
						<selectCustomer :supp="search_form.supplier" @getCustomerName="getCustomerName" />
					</div>
				</div>
				<div style="display: flex;" v-if="ttype==2">
					<div>
						客户：
					</div>
					<div>
						<selectCustomer 
						 holder="请输入客户名称"
						 :supp="search_form.customer" @getCustomerName="getCustomerName" />
					</div>
				</div>
            </div>
			<div>
			    账户： <el-select size="mini" v-model="search_form.bank_account" placeholder="请选择">
						<el-option
						  v-for="item in backList"
						  :key="item.id"
						  :label="item.account_title"
						  :value="item.account_title">
						</el-option>
					  </el-select>
			</div>
			<div>
			    <el-button type="primary" size="mini" @click="search">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
        </div>
        <br>
        <el-table  :data="list"  
		     ref="multipleTable"
			 border  
			 @selection-change="handleSelectionChange"
			 @cell-click="cellClick"
			>
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
            <el-table-column   align="center" prop="buyer_date" width="130px" 
				label="发生日期" />
			
			<el-table-column  align="center" width="80"   label="单据号">
				<template slot-scope="scope">
				   <div v-if="scope.row.code">
						<el-button @click="toInfo(scope.row)" type="text" >
							{{$utils.sliceStr(scope.row.order_number,6)}}
						</el-button>
				   </div>
				   <div v-else>
					   <el-button @click="toPutPayInfo(scope.row)" type="text" >
							{{$utils.sliceStr(scope.row.del_id,6)}}
					   </el-button>
				   </div>
				</template>
			</el-table-column>
             <el-table-column   align="center" prop="remark" label="摘要" />
            <el-table-column   align="center"  width="300px" prop="goods_name"  label="商品名称" />
			
			<el-table-column   align="center"  width="150px" prop="price"  label="原始金额" />
			<!-- <el-table-column   align="center"  width="150px" prop="residue_money"  label="剩余金额" /> -->
			<el-table-column   align="center"  width="180px"   label="剩余金额">
				<template slot-scope="scope">
				   <div>
						{{scope.row.residue_money=='0.00' || !scope.row.residue_money ?scope.row.price:scope.row.residue_money}}
						
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="130px"   :label="ttype==1?'本次付款':'本次收款'">
				<template slot-scope="scope">
				   <div>
						<el-input   size="mini" v-model="scope.row.one_pay"></el-input>
						<!-- @input="changeOnePay(scope)" -->
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"   :label="ttype==1?'供应商':'客户'">
				<template slot-scope="scope">
				   <div>
						<span v-if="ttype==1">{{scope.row.supplier}}</span>
						<span v-else>{{scope.row.customer}}</span>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="180px"   :label="ttype==1?'付款账号':'收款账号'">
				<template slot-scope="scope">
				   <div>
						<el-select size="mini" v-model="scope.row.bank_account" placeholder="请选择">
								<el-option
								  v-for="item in backList"
								  :key="item.id"
								  :label="item.account_title"
								  :value="item.account_title">
								</el-option>
						</el-select>
				   </div>
				</template>
			</el-table-column>
			<el-table-column   align="center"  width="180px"   label="备注">
				<template slot-scope="scope">
				   <div>
						<el-input  size="mini" v-model="scope.row.remarks"></el-input>
				   </div>
				</template>
			</el-table-column>
		  
        </el-table>
		<div @click="toggleInverseAllSelection">
			
			反选
		</div>
    </div>
</template>
<script>
	import selectCustomer from "@/components/selectCustomer"
    export default {
        components:{
			selectCustomer
        },
		props:{
			ttype:{
				type:String,
				default:'1',
			}
		},
        data(){
            return {
                search_form:{
					buyer_person:"",
					supplier:"",
					bank_account:"",
					start_time:'',
					end_time:'',
					customer:''
                },
				time:[],
				backList:[]
            }
        },
        mounted(){
			// this.search_form.buyer_person = sessionStorage.getItem('user_name')
			
			this.lodeBackList()
			this.lodeList()
        },
        methods:{
			//反选
			toggleInverseAllSelection(){
			  this.list.forEach((item) => {
			    this.$refs.multipleTable.toggleRowSelection(item);
			  });
			},
			toPutPayInfo(row){
				let type = row.type
				if(type==1){
					this.$router.push({
						path:'/settlementSys/settlementPay',
						query:{
							id:row.id
						}
					})
				}else{
					this.$router.push({
						path:'/settlementSys/settlementPut',
						query:{
							id:row.id
						}
					})
				}
			},
			changeOnePay(scope){
				// let index = scope.$index
				// let row = scope.row
				// if(row.price - row.one_pay < 0){
				// 	this.$message.error('剩余金额不能小于0')
				// 	this.list[index].one_pay = ''
				// 	this.list[index].residue_money = row.price
				// }else{
				// 	this.list[index].residue_money = row.price - row.one_pay
				// }
				// if(row.price - row.one_pay == 0){
				// 	this.list[index].residue_money = '0.00'
				// }
			},
			callPayPut(type){
				let order_number = this.$utils.generateRandomString(2)
				for(let item of this.selectGoods){
					item.is_settle = type+'',
					item.type = this.search_form.type
					item.hander_person = sessionStorage.getItem('user_name')
					item.prepared_by = sessionStorage.getItem('user_name')
					item.order_number = order_number
				}
				this.$post('/putpay/callPutPay',this.selectGoods,res=>{
					if(res.data.code == 200){
						this.$message.success('操作成功')
						this.lodeList()
					}
				})
			},
			lodeBackList(){
				this.$post('/baseInfo/getAccountList',{},res=>{
					this.backList = res.data.data
				})
			},
			lodeList(){
				if(this.time.length==2){
					this.search_form.start_time = this.time[0]
					this.search_form.end_time = this.time[1]
				}
					this.search_form.type = this.ttype
				this.$post('/putpay/getPayPutInfo',this.search_form,res=>{
					for(let item of res.data.data){
						item.one_pay = ''
						item.remarks = ''
						item.del_id = this.$utils.generateRandomString(2)
					}
					this.list = res.data.data
				})
			},
			clearSearch(){
				this.search_form={
					buyer_person:"",
					supplier:"",
					bank_account:"",
					start_time:'',
					end_time:'',
					customer:""
				}
				this.lodeList()
			},
			getCustomerName(val){
				if(this.ttype==1){
					this.search_form.supplier = val
				}else{
					this.search_form.customer = val
				}
				
			}, 
           
            
        }
    }
</script>
